<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Vue.js 表单</title>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">

    <!-- 用 v-model 指令在表单控件元素上创建双向数据绑定。 -->
    <!-- v-model 会根据控件类型自动选取正确的方法来更新元素。 -->
    <!-- input 和 textarea 元素中使用 v-model 实现双向数据绑定 -->
    <p>input 元素: </p>
    <input v-model="message" placeholder="编辑我......">
    <p>消息是{{message}}</p>

    <p>textarea 元素: </p>
    <p style="white-space: pre;">{{message2}}</p>
    <textarea v-model="message2" placeholder="多行文本输入.......">
    </textarea>
    <br> <br> <br>
    <!-- 复选框
        复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组： 
    -->
    <p>单个复选框: </p>
    <input type="checkbox" id="cb" v-model="checked">
    <label for="cb">{{checked}}</label>

    <p>多个复选框: </p>
    <input type="checkbox" id="runoob" v-model="checkedNames" value="runoob">
    <label for="runoob">Runoob</label>
    <input type="checkbox" id="google" v-model="checkedNames" value="google">
    <label for="google">Google</label>
    <input type="checkbox" id="taobao" v-model="checkedNames" value="taobao">
    <label for="taobao">Taobao</label>
    <br />
    <span>选择的值为: {{checkedNames}}</span>

    <br /> <br />
    <!-- 单选按钮 单选按钮的双向数据绑定 -->
    <input type="radio" id="runoob" value="Runoob" v-model="picked">
    <label for="runoob">Runoob</label>
    <br>
    <input type="radio" id="google" value="Google" v-model="picked">
    <label for="google">Google</label>
    <br />
    <span>选中的值为: {{picked}}</span>
    <br>

    <br> <br>
    <!-- select列表 拉列表的双向数据绑定-->
    <select v-model="selected" name="fruit">
      <option value="">选择一个网站</option>
      <option value="www.runoob.com">Runoob</option>
      <option value="www.google.com">Google</option>
    </select>
    <div id="output">
      选择的网站是: {{selected}}
    </div>

  </div>

  <script>
    new Vue({
      el: "#app",
      data: {
        message: "Runoob",
        message2: '菜鸟教程\r\nhttp://www.runoob.com',
        checked: false,
        checkedNames: [],
        picked: 'Runoob',
        selected: ''
      }
    })
  </script>
</body>

</html>